<template>
  <div>
    <!-- 显示当前文件夹的名称 -->
    <div>{{ folder.name }}</div>

    <!-- 如果该文件夹有子文件夹或文件，递归渲染子文件夹 -->
    <div v-if="folder.children && folder.children.length">
      <folder v-for="item in folder.children" :key="item.id" :folder="item" />
    </div>
  </div>
</template>
  
<script>
export default {
  name: 'Folder',  // 递归组件的名称
  props: {
    folder: Object  // 接收一个 folder 对象作为 prop
  }
};
</script>

<style scoped>
div {
  padding-left: 20px;  /* 嵌套时，子文件夹有缩进 */
  border-left: 1px solid #ccc;
  margin: 5px 0;
}
</style>
  